<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<link href="css/jquery.mobile-1.1.0.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/iscroll.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript">
	var myScroll;
	function loaded() {
		myScroll = new iScroll('wrapper');
	}

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);

	/* * * * * * * *
	 *
	 * Use this for high compatibility (iDevice + Android)
	 *
	 */
	document.addEventListener('DOMContentLoaded', function() {
		setTimeout(loaded, 200);
	}, false);
	/*
	 * * * * * * * */

	/* * * * * * * *
	 *
	 * Use this for iDevice only
	 *
	 */
	//document.addEventListener('DOMContentLoaded', loaded, false);
	/*
	 * * * * * * * */

	/* * * * * * * *
	 *
	 * Use this if nothing else works
	 *
	 */
	//window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
	/*
	 * * * * * * * */
</script>

<style type="text/css" media="all">
body,ul,li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 12px;
	-webkit-user-select: none;
	-webkit-text-size-adjust: none;
	font-family: helvetica;
}

#header {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	line-height: 45px;
	background-color: #d51875;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9),
		color-stop(0.05, #d51875), color-stop(1, #7b0a2e) );
	background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding: 0;
	color: #eee;
	font-size: 20px;
	text-align: center;
}

#header a {
	color: #f3f3f3;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

#footer {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background-color: #222;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999),
		color-stop(0.02, #666), color-stop(1, #222) );
	background-image: -moz-linear-gradient(top, #999, #666 2%, #222);
	background-image: -o-linear-gradient(top, #999, #666 2%, #222);
	padding: 0;
	border-top: 1px solid #444;
}

#wrapper {
	position: absolute;
	z-index: 1;
	top: 45px;
	bottom: 120px;
	left: 0;
	width: 100%;
	background: #aaa;
	overflow: auto;
}

#scroller {
	position: absolute;
	z-index: 1;
	/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	width: 100%;
	padding: 0;
}

#scroller ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

#scroller li {
	padding: 0 10px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	background-color: #fafafa;
	font-size: 14px;
}
</style>
</head>
<body>

	<div id="header">
		<a href="http://cubiq.org/iscroll">iScroll</a>
	</div>
	<div id="wrapper">
		<div id="scroller">
			<ul id="thelist">
				<li>Pretty row 1</li>
				<li>Pretty row 2</li>
				<li>Pretty row 3</li>
				<li>Pretty row 4</li>
				<li>Pretty row 5</li>
				<li>Pretty row 6</li>
				<li>Pretty row 7</li>
				<li>Pretty row 8</li>
				<li>Pretty row 9</li>
				<li>Pretty row 10</li>
				<li>Pretty row 11</li>
				<li>Pretty row 12</li>
				<li>Pretty row 13</li>
				<li>Pretty row 14</li>
				<li>Pretty row 15</li>
				<li>Pretty row 16</li>
				<li>Pretty row 17</li>
				<li>Pretty row 18</li>
				<li>Pretty row 19</li>
				<li>Pretty row 20</li>
				<li>Pretty row 21</li>
				<li>Pretty row 22</li>
				<li>Pretty row 23</li>
				<li>Pretty row 24</li>
				<li>Pretty row 25</li>
				<li>Pretty row 26</li>
				<li>Pretty row 27</li>
				<li>Pretty row 28</li>
				<li>Pretty row 29</li>
				<li>Pretty row 30</li>
				<li>Pretty row 31</li>
				<li>Pretty row 32</li>
				<li>Pretty row 33</li>
				<li>Pretty row 34</li>
				<li>Pretty row 35</li>
				<li>Pretty row 36</li>
				<li>Pretty row 37</li>
				<li>Pretty row 38</li>
				<li>Pretty row 39</li>
				<li>Pretty row 40</li>
			</ul>
		</div>
	</div>
	<div id="footer" data-role="footer" class="ui-bar">
		<div data-role="navbar" class="ui-navbar">
			<ul class="ui-grid-c">
				<li class="ui-block-a"><a href="footer-persist-a.html"
					data-prefetch="true"
					class="ui-btn-active ui-state-persist ui-btn ui-btn-inline ui-btn-hover-a ui-btn-up-a"
					data-corners="false" data-shadow="false" data-iconshadow="true"
					data-wrapperels="span" data-theme="a" data-inline="true"><span
						class="ui-btn-inner"><span class="ui-btn-text">發票基本服務</span>
					</span> </a></li>
				<li class="ui-block-b"><a href="footer-persist-b.html"
					data-prefetch="true" data-corners="false" data-shadow="false"
					data-iconshadow="true" data-wrapperels="span" data-theme="a"
					data-inline="true" class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">電子發票管理</span>
					</span> </a></li>
				<li class="ui-block-c"><a href="footer-persist-c.html"
					data-prefetch="true" data-corners="false" data-shadow="false"
					data-iconshadow="true" data-wrapperels="span" data-theme="a"
					data-inline="true" class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">發票捐贈服務</span>
					</span> </a></li>
				<li class="ui-block-d"><a href="footer-persist-d.html"
					data-prefetch="true" data-transition="slideup" data-corners="false"
					data-shadow="false" data-iconshadow="true" data-wrapperels="span"
					data-theme="a" data-inline="true"
					class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">對獎號碼查詢</span>
					</span> </a></li>
			</ul>
			<ul class="ui-grid-c">
				<li class="ui-block-a"><a href="footer-persist-a.html"
					data-prefetch="true"
					class="ui-btn-active ui-state-persist ui-btn ui-btn-inline ui-btn-hover-a ui-btn-up-a"
					data-corners="false" data-shadow="false" data-iconshadow="true"
					data-wrapperels="span" data-theme="a" data-inline="true"><span
						class="ui-btn-inner"><span class="ui-btn-text">協辦商家搜尋</span>
					</span> </a></li>
				<li class="ui-block-b"><a href="footer-persist-b.html"
					data-prefetch="true" data-corners="false" data-shadow="false"
					data-iconshadow="true" data-wrapperels="span" data-theme="a"
					data-inline="true" class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">懶人大補貼</span>
					</span> </a></li>
				<li class="ui-block-c"><a href="footer-persist-c.html"
					data-prefetch="true" data-corners="false" data-shadow="false"
					data-iconshadow="true" data-wrapperels="span" data-theme="a"
					data-inline="true" class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">其它相關連結</span>
					</span> </a></li>
				<li class="ui-block-d"><a href="footer-persist-d.html"
					data-prefetch="true" data-transition="slideup" data-corners="false"
					data-shadow="false" data-iconshadow="true" data-wrapperels="span"
					data-theme="a" data-inline="true"
					class="ui-btn ui-btn-up-a ui-btn-inline"><span
						class="ui-btn-inner"><span class="ui-btn-text">Facebook</span>
					</span> </a></li>
			</ul>
		</div>
	</div>

</body>
</html>
